<!DOCTYPE HTML>
<html>
<!--_meta 作为公共模版分离出去-->
{include file="common/_meta"}
<!--/meta 作为公共模版分离出去-->
<body>
<div class="cl pd-5 bg-1 bk-gray"> 
    <a href="javascript:void(0);" class="btn btn-primary radius sethumb" id="step1" ><i class="Hui-iconfont">&#xe600;</i> 本地上传 </a>&nbsp;&nbsp;
    <a href="javascript:void(0);" class="btn btn-default radius sethumb" id="step2"><i class="Hui-iconfont">&#xe600;</i> 站内选择 </a>&nbsp;&nbsp;
    <a href="javascript:void(0);" class="btn btn-default radius sethumb" id="step3"><i class="Hui-iconfont">&#xe600;</i> 网络图片 </a>&nbsp;&nbsp;
</div>

<!-- 上传缩略图 -->
<div class="step0 active" style="display:block;">
    <form id="submit_form" method="post" action="" enctype="multipart/form-data">
        <input type="hidden" name="isthumb" id="isthumb" value="1">
        <div class="row cl" style="margin-top:80px;margin-left:30px;">
            <label class="form-label col-xs-2 col-sm-1"><span class="c-red">*</span>本地上传：</label>
            <div class="formControls col-xs-6 col-sm-2"> 
                <input type="file"  class="input-text" name="upload_file" id="upload_file">
            </div>
            <!-- <input type="text" name="test_text" id="test_text" value="test"> -->
            <div class="col-3"> </div>
        </div>
        <div class="row cl" style="margin-top:30px;margin-left:30px;">
            <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2"> 
                <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;" onCLick="uploadThumb()">
                <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;" onClick="cancelSelect()" >	
            </div>
        </div>
    </form>
</div>

<!-- 选择缩略图 -->
<div class="step1 active" style="display:none;">  
    <table class="table table-border table-bordered table-bg">
        <thead>
            <tr class="text-c">
                <th width="50%" background="/static/images/linebg.gif"> 
                    <strong>文件名</strong>
                </th>
                <th width="10%" background="/static/images/linebg.gif"><strong>文件大小</strong></th>
                <th width="32%" background="/static/images/linebg.gif"><strong>最后修改时间</strong></th>
            </tr>
        </thead>
        <tbody>
            <tr class="text-c"  bgcolor='#FFFFFF' height='26' onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';">
                <td>
                    <a href="selectThumb?activepath={$activeurl}&step=1"> <img src=/static/images/dir2.gif border=0 width=16 height=16 align=absmiddle> 上级目录</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;当前目录: <span style="color:#f00;"> {$activepath} </span> 
                </td>
                <td></td>
                <td></td>
            </tr>
            {foreach $dirs as $dir}
            <tr class="text-c" style="height:26px; "  onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';">
                <td style="text-align:left;" >
                    <a href="selectThumb?activepath={$activepath}/{$dir}&step=1"> 
                    <img src=/static/images/dir.gif border=0 width=16 height=16 align=absmiddle>{$dir}
                    </a>
                </td>
                <td></td>
                <td></td>
            </tr>
            {/foreach}
            {foreach $files as $file}
            <tr class="text-c" bgcolor='#FFFFFF' height='26px' onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';">
                <td style="text-align:left;" >
                    <a href="javascript:void(0);" onClick="aSelectImg(this,'{$activepath}')"><img src="/static/images/{$file['extension']}.gif" border=0 width=16px height=16px align=absmiddle >{$file['name']}</a>
                </td>
                </td>
                <td align='center'> {$file['size']} </td>
                <td align='center'> {$file['time']}&nbsp;&nbsp;<a href='javascript:void(0);' onclick="preview('{$activepath}/{$file[\'name\']}')" class="btn" >预览</a> </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
    <div id="showdiv" style="width:400px;height:300px;position:absolute;top:20%; left:20%;background:#fcfdfd;box-shadow:1px 8px 10px 1px #9b9b9b;border-radius:1px;  z-index:999;display:none; ">
        <input type="hidden" name="pImgname" id="pImgname" value="">
        <div class="tiptop" style="background-color:#5A98DE;text-align:center;height:36px">
            <span style="color:#fff">图片预览</span>
            <a onClick="$('#showdiv').css('display','none')" style="display:block; background:url(/static/images/close.png) no-repeat; width:22px; height:22px;float:right;margin-right:7px; margin-top:10px; cursor:pointer;"></a>
        </div>
        <div class="tipimg" style="width:300px;height:190px;margin-left:40px;margin-top:20px;" ><img id="showimg" src="" width="300" height="200px" ></div>
        <div class="tipbtn" style="float:right;margin-top:10px;;margin-right:30px;">
            <input name="" type="button"  class="btn btn-primary radius" value="选定" onClick="pSelectImg()" />&nbsp;
            <input name="" type="button"  class="btn btn-default radius" value="取消" onClick="$('#showdiv').css('display','none')" />
        </div>
    </div>
</div> 

<!-- 网络图片-->
<div class="step2 active" style="display:none;">
    <div class="row cl" style="margin-top:80px;margin-left:30px;">
        <label class="form-label col-xs-2 col-sm-1"><span class="c-red">*</span>图片地址：</label>
        <div class="formControls col-xs-6 col-sm-2"> 
            <input type="text"  class="input-text" name="onlineImg" id="onlineImg" value="" placeholder="将图片地址黏贴至此">
        </div>
        <span class="ospan c-red"></span>
        <div class="col-3"> </div>
    </div>
    <div class="row cl" style="margin-top:30px;margin-left:30px;">
        <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2"> 
            <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;" onCLick="oSelectImg()">
            <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;" onClick="cancelSelect()" >	
        </div>
    </div>
</div>

<!--_footer 作为公共模版分离出去-->
{include file="common/_footer" /}
<!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/static/js/jquery/jquery.form.js"></script>
<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript">
//模块弹出
var step={$step};
$('.active').css('display','none');
$('.step'+step).css('display','block');
//点击选择
$('.sethumb').each(function(x){ 
    $(this).click(function(){
        $('.sethumb').attr('class','btn btn-default radius sethumb');
        $(this).attr('class','btn btn-primary radius sethumb');
        $('.active').css('display','none');
        $('.step'+x).css('display','block');
    });
});
//取消
function cancelSelect(){
    layer_close();
}

//step0本地上传图片
function uploadThumb(){
    if($("#upload_file").val()==''){
        layer.msg("请选择要上传的文件",{icon:6,time:1000});
        return false;
    }else{
        var formData =  new FormData($("#submit_form")[0]);
//ajax上传
        $.ajax({
            url:'{:url("uploadThumb")}',
            type: 'POST',
            async: true,
            cache: false,
            data:formData,
            processData: false,
            contentType: false,
            dataType:"json",
            beforeSend: function(){
                uploading = true;
            },
            success : function(data) {
                if (data.status == 1) {
                    console.log(data.imgname);
                    window.parent.$("#thumb").val('/'+data.imgname);
                    layer_close();
                } else {
                    alert(data.msg);
                    return false;
                }
                uploading = false;
            }
        });
    }
}

//step1站内选择
function preview(imageName){
    url='/'+imageName;
    $("#showdiv").css('display','block');
    // $("#pImgname").val(imageName);
    $("#showimg").attr('src',url);
}
function pSelectImg(){
    // var imageName=$("#pImgname").val();
    var imageUrl =  $("#showimg").attr('src');
    window.parent.$("#thumb").val(imageUrl);
    layer_close();
}
function aSelectImg(obj,activepath){
    var imgname=$(obj).text();
    window.parent.$("#thumb").val('/'+activepath+'/'+imgname);
    layer_close();
}

//step2网络图片

function oSelectImg(){
    var onlineImg=$("#onlineImg").val();
    if(onlineImg==''){
        layer.msg('图片地址为空',{icon:5,time:1000});
        return false;
    }
    $test=$.post('isImg',{'filename':onlineImg},function(data){
        console.log(data);
        if (data.status == 1) {   
            // $(".ospan").html('');
            // return true
            window.parent.$("#thumb").val(onlineImg);
            layer_close();
        } else {
            $(".ospan").html(data.msg);
            return false;
        }
    },'json');
}
</script>
<!--请在上方写此页面业务相关的脚本--> 
</body>
</html>